<template>
	<view class="container">
		<view class="center">
			<view class="title">可提现金额（元）</view>
			<view class="amount"><span style="font-size: 40upx;">￥</span> {{balance}}</view>
			<view class="form">
				<view class="title">提现金额</view>
				<view class="input">
					<view class="left">
						<view class="fh">￥</view>
					</view>
					<view class="center">
						<u-input placeholder="请输入金额" v-model="value" type="number" :border="false" />
					</view>
					<view class="right">
						<view class="title" @click="handleClickAll">全部提现</view>
					</view>
				</view>
				<view class="content">
					<view class="content-left">提现至</view>
					<view class="content-right" @click="handleClickRight">
						{{cardInfo.name}}
						<span class="c-num" v-if="cardInfo.cardNo">
							{{cardInfo.cardNo.substring(cardInfo.cardNo.length-4)}}
							<u-icon name="arrow-right" size="32"></u-icon>
						</span>
					</view>
				</view>
				<view class="btn" @click="handleClickSubmit">申请提现</view>
			</view>
		</view>
		<view class="top"></view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				balance: 0,
				cardInfo: {
					name: '请选择'
				}
			}
		},
		onLoad(opt) {
			console.log(opt)
			this.balance = opt.balance;
		},
		methods: {
			async addWithdrawalApply() {
				let data = await this.$apis.addWithdrawalApply({
					bankId: this.cardInfo.id,
					money: this.value
				});
				if (data.code === 200) {
					this.$refs.uToast.show({
						title: '申请提交成功',
						type: 'success',
						url: 'pages/user/withdrawalDetail/withdrawalDetail',
						params: {
							name: this.cardInfo.name,
							value: this.value,
							num: this.cardInfo.cardNo,
						}
					})
					// this.$mRouter.push({
					// 	route: this.$mRoutesConfig.withdrawalDetail
					// 	// route: this.$mRoutesConfig.withdrawalState
					// })
				}
			},
			handleClickSubmit() {
				if (this.cardInfo.cardNo === undefined) {
					this.$refs.uToast.show({
						title: '请先选择银行卡',
						type: 'warning',
					})
				} else if (this.value === '' || this.value > this.balance) {
					this.$refs.uToast.show({
						title: '余额不足',
						type: 'warning',
					})
				} else {
					this.addWithdrawalApply();
				}

			},
			handleClickAll() {
				if (this.balance > 0) {
					this.value = this.balance
				}
			},
			handleClickRight() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.bankCards
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f4f4f4;
	}

	.container {
		position: relative;

		.top {
			position: absolute;
			top: 0;
			width: 100%;
			height: 370upx;
			background: linear-gradient(0deg, #AC62FF, #DF62FF);
		}

		.center {
			width: 690upx;
			z-index: 1;
			margin-left: 30upx;
			position: relative;
			overflow: hidden;

			.form {
				width: 100%;
				height: 524upx;
				background-color: #fff;
				border-radius: 20upx;
				padding: 32upx 30upx;
				margin-top: 57upx;

				.btn {
					width: 100%;
					height: 80upx;
					background-color: #AB61FF;
					border-radius: 40upx;
					line-height: 80upx;
					text-align: center;
					color: #fff;
					font-size: 32upx;
					margin-top: 60upx;
				}

				.content {
					display: flex;
					height: 120upx;
					align-items: center;
					justify-content: space-between;

					.content-right {
						.c-num {
							color: #888D99;
							margin-left: 15upx;
						}
					}
				}

				.input {
					width: 100%;
					height: 100upx;
					border-bottom: #f4f4f4 solid 1upx;
					display: flex;
					margin-top: 60upx;
					justify-content: space-between;

					.center {
						flex: 1;
						margin-left: 0;

						input {
							font-size: 66upx;
							color: red;
						}
					}

					.right {
						.title {
							color: #4B9CFF;
							font-size: 28upx;
							width: 150upx;
							line-height: 100upx;
							text-align: right;
						}
					}

					.left {
						height: 100%;

						.fh {
							font-size: 80upx;
							color: #0D1D36;
							height: 80upx;
							line-height: 80upx;
						}
					}
				}

				.title {
					color: #0E1E36;
					font-size: 28upx;
					margin-top: 0;
				}
			}

			.title {
				color: #fff;
				font-size: 24upx;
				line-height: 24upx;
				margin-top: 40upx;
			}

			.amount {
				color: #fff;
				font-size: 70upx;
				font-weight: bold;
				line-height: 70upx;
				height: 70upx;
				margin-top: 47upx;
			}
		}
	}
</style>
